<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}

<!-- 写入 base.html 中定义的 title -->
{% block title %}
    首页
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}

<!-- 定义放置文章标题的div容器 -->
<div class="container">
     <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{% url 'article:article_list' %}?search={{ search }}&column={{ column }}&tag={{ tag }}">
                    最新
                </a>
            </li>
            <li class="breadcrumb-item">
                <a href="{% url 'article:article_list' %}?order=total_views&search={{ search }}&column={{ column }}&tag={{ tag }}">
                    最热
                </a>
            </li>
        </ol>
    </nav>

    <!-- 搜索栏 -->
    <div class="row">
        <div class="col-auto mr-auto">
            <form class="form-inline" >
                <label class="sr-only">content</label>
                <input type="text"
                    class="form-control mb-2 mr-sm-2"
                    name="search"
                    placeholder="搜索文章..."
                    required
                >
            </form>
        </div>
    </div>

    <!-- 搜索提示语 -->
    {% if search %}
        {% if articles %}
            <h4><span style="color: red">"{{ search }}"</span>的搜索结果如下：</h4>
            <hr>
        {% else %}
            <h4>暂无<span style="color: red">"{{ search }}"</span>有关的文章。</h4>
            <hr>
        {% endif %}
    {% endif %}

    <!-- 复用文章列表页 -->
    {% include 'article/list_default.html' %}

    <!-- 页码导航 -->
    <div class="pagination row">
        <div class="m-auto">
            <span class="step-links">
                <!-- 如果不是第一页，则显示上翻按钮 -->
                {% if articles.has_previous %}
                    <a href="?page=1&order={{ order }}&search={{ search }}&column={{ column }}&tag={{ tag }}" class="btn btn-success">
                        &laquo; 1
                    </a>
                    <span>...</span>
                    <a href="?page={{ articles.previous_page_number }}&order={{ order }}&search={{ search }}&column={{ column }}&tag={{ tag }}"
                       class="btn btn-secondary"
                    >
                        {{ articles.previous_page_number }}
                    </a>
                {% endif %}

                <!-- 当前页面 -->
                <span class="current btn btn-danger btn-lg">
                    {{ articles.number }}
                </span>

                <!-- 如果不是最末页，则显示下翻按钮 -->
                {% if articles.has_next %}
                    <a href="?page={{ articles.next_page_number }}&order={{ order }}&search={{ search }}&column={{ column }}&tag={{ tag }}"
                       class="btn btn-secondary"
                    >
                        {{ articles.next_page_number }}
                    </a>
                    <span>...</span>
                    <a href="?page={{ articles.paginator.num_pages }}&order={{ order }}&search={{ search }}&column={{ column }}&tag={{ tag }}"
                       class="btn btn-success"
                    >
                        {{ articles.paginator.num_pages }} &raquo;
                    </a>
                {% endif %}
            </span>
        </div>
    </div>

</div>

{% endblock content %}
